<!--  -->
<template>
  <div>
    <div class="footer" :class="[fun.getPhoneEnv() == 3 ? 'pcStyle' : '', fun.isIphoneX() ? 'iphoneXStyle' : '']">
      <div class="ul">
        <div class="a" @click.stop="goToUrl(footer.first_mobile_link)">
          <img class="img-icon" :src="footer&&footer.first_menu_icon_url" alt="">
          <div class="p">{{footer&&footer.first_menu_title}}</div>
        </div>
        <div class="a" @click.stop="goToUrl(footer.second_mobile_link)">
          <img class="img-icon" :src="footer&&footer.second_menu_icon_url" alt="">
          <div class="p">{{footer&&footer.second_menu_title}}</div>
        </div>
        <div class="a" @click.stop="goTo(3)" style="z-index: 9999; position: relative;">
          <div class="li">
            <img class="openMyShop" :class="showCircle ? 'rotateImg' : 'normalImg'" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/micro_communities/tab_addition.png" />
          </div>
        </div>
        <div class="a" @click.stop="goToUrl(footer.third_mobile_link)">
          <img class="img-icon" :src="footer&&footer.third_menu_icon_url" alt="">
          <div class="p">{{footer&&footer.third_menu_title}}</div>
        </div>
        <div class="a" @click.stop="goToUrl(footer.forth_mobile_link)">
          <img class="img-icon" :src="footer&&footer.forth_menu_icon_url" alt="">
          <div class="p">{{footer&&footer.forth_menu_title}}</div>
        </div>
      </div>
    </div>

    <van-overlay :show="showCircle" custom-style="z-index: 9;">
      <div class="Circle-main">
        <div class="Circle-cell" v-for="(item, index) in list" :key="index" :style="{ top: item.top, left: item.left }" @click.stop="gotoUrl(item.link)">
          <img :src="item.image" />
          <div>{{ item.title }}</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: ()=>[]
    },
    footer: {
      type: Object,
      default: ()=>{}
    }
  },
  data() {
    return {
      showCircle: false,
      loadCircle: true
    };
  },
  components: {},
  computed: {},
  methods: {
    gotoUrl(_link) {
      if (!_link) return;
      window.location.href = _link;
    },
    goTo(id) {
      switch (id) {
        case 1:
          this.$router.push(this.fun.getUrl("home", {}));
          break;
        case 2:
          this.$router.push(this.fun.getUrl("category", {}));
          break;
        case 3:
          if (this.loadCircle) {
            this.getTop();
            return;
          }
          this.showCircle = !this.showCircle;
          break;
        case 4:
          this.$router.push(this.fun.getUrl("cart", {}));
          break;
        case 5:
          this.$router.push(this.fun.getUrl("member", {}));
          break;
        default:
          console.log("error");
      }
    },
    goToUrl(url){
      window.location.href = url;
    },
    getPi() {
      const PI = 3.1415926535;
      let angle = 0;
      let R = 180;
      let n = 5;
      let top = 0;
      let left = 0;

      angle = 180 / n;

      for (let i = 0; i < n; i++) {
        let ang = (i * angle * PI) / 90;
        if (ang >= 0 && ang < PI / 2) {
          top = R - R * Math.cos(ang);
          left = R + R * Math.sin(ang);
        }
        if (ang >= PI / 2 && ang < PI) {
          top = R + R * Math.cos(ang);
          left = R - R * Math.sin(ang);
        }
        if (ang >= PI && ang <= (PI * 3) / 2) {
          top = R - R * Math.cos(ang);
          left = R + R * Math.sin(ang);
        }
        if (ang >= (PI * 3) / 2 && ang <= PI * 2) {
          top = R + R * Math.cos(ang);
          left = R - R * Math.sin(ang);
        }
        console.log(top, left);
      }
      return 0;
    },
    getCirclePosition({ x, y, r, nodeNum, nodeIndex, changeAngle = 210 }) {
      // 获取平分的角度
      let angle = 180 / nodeNum;
      // 获取当前角度值
      let currentAngle = angle * nodeIndex;
      // 调整这个角度，即可变换初始角度
      let _angle = ["", "270", "225", "210", "200", "200"];
      currentAngle = currentAngle + Number(_angle[this.list.length]);
      // if (changeAngle) {
      //   currentAngle = currentAngle + changeAngle;
      // }
      // 圆上点的x_
      let x_ = x + r * Math.cos((currentAngle * Math.PI) / 180);
      // 圆上点的y_
      let y_ = y + r * Math.sin((currentAngle * Math.PI) / 180);

      return {
        x_,
        y_
      };
    },

    getTop() {
      // 圆弧上点的个数
      let len = this.list.length;
      for (let i = 0; i <= len - 1; i++) {
        let position = this.getCirclePosition({
          x: 125,
          y: 125,
          r: 125,
          nodeNum: len,
          nodeIndex: i
        });
        let left = position.x_ - 10 + "px";
        let top = position.y_ - 10 + "px";
        this.list[i].top = top;
        this.list[i].left = left;
      }
      this.loadCircle = false;
      this.showCircle = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  // height: 3.125rem;
  box-sizing: border-box;
  z-index: 999;
}

.van-overlay {
  z-index: 998;
}

.footer .ul {
  box-sizing: border-box;
  width: 100%;
  height: 3.125rem;
  padding: 0.5rem;
  display: flex;
}

.footer .ul .a {
  width: 25%;
  font-size: 0.625rem;
  color: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  z-index: 8;
}

.footer .ul .a i {
  display: flex;
  font-size: 1.125rem;
}

.footer .ul .img-icon {
  height: 20px;
  margin-bottom: 4px;
}

.footer .ul .openMyShop {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  line-height: 1.25rem;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  bottom: 0;
  font-size: 0.875rem;
  z-index: 100;
  margin: 0 auto;
}

.Circle-main {
  position: fixed;
  bottom: -35px;
  width: 260px;
  height: 260px;
  margin: 0 auto;
  // border: 1px solid #fff;
  left: 50%;
  transform: translateX(-50%);
}

.Circle-cell {
  position: absolute;
  color: #fff;
  font-size: 10px;
  text-align: center;
}

.Circle-cell img {
  width: 2.1875rem;
  height: 2.1875rem;
  border-radius: 50%;
}

.pcStyle {
  width: 375px !important;
  left: 50%;
  margin-left: -187.5px;
}

.iphoneXStyle {
  padding-bottom: 24px;
}

.rotateImg {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transition: transform 0.5s;
}

.normalImg {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transition: transform 0.5s;
}
</style>
